<template>
  <page-card :title="menuName" >
    <!-- 头部栏位 -->
    <a-row style="margin-bottom: 20px">
      <!-- 空行 -->
      <a-col :span="5">
        <a-textarea v-model="numbs" ref="text" :rows="rows" placeholder="请输入手机号码或者zwddId，逗号分隔" @paste="paste"></a-textarea>
      </a-col>
      <a-col :span="1">
      </a-col>
      <!-- 新增按钮 -->
      <a-col :span="2">
        <a-button type="primary"  @click="pullData(0)">手机号拉取</a-button>
      </a-col>
      <a-col :span="2">
        <a-button type="primary"  @click="pullData(1)">zwddId拉取</a-button>
      </a-col>
      <!-- 空行 -->
      <a-col :span="20"></a-col>
    </a-row>
    <!-- 表格  -->
    <a-table :columns="tableColumns" :data-source="tableData" :pagination="false" >
      <template slot="action" slot-scope="text, record">
        <a @click="detil(record.pullTime)">详情</a>
      </template>
    </a-table>
  </page-card>
</template>


<script>

// 1、引入Vue等框架组件库或插件
// 2、引入自定义组件
// 3、引入第三方工具类插件
// 4、引入自定义工具或插件或混入或基类等
// 5、引入API
import { pullUser, getUserRecord } from "../../api/personnel-synchronization";
export default {
  /* 人员同步 */
  name: 'PersonnelSynchronization',
  components: {},
  props: {},
  data () {
    return {
      numbs: undefined,
      tableData: [],
      tableColumns: [
        {
          dataIndex: 'pullTime',
          title: '拉取时间',
          align: 'center',
          key: 'pullTime'
        },
        {
          dataIndex: 'pullUserName',
          title: '拉取人',
          align: 'center',
          key: 'pullUserName'
        },
        {
          dataIndex: 'phone',
          title: '手机号',
          align: 'center',
          key: 'phone'
        },
        {
          dataIndex: 'zwddId',
          title: '政务钉钉id',
          align: 'center',
          key: 'zwddId'
        },
        {
          dataIndex: 'pullNum',
          title: '拉取数量',
          align: 'center',
          key: 'pullNum'
        },
        {
          dataIndex: 'option',
          title: '操作',
          align: 'center',
          scopedSlots: { customRender: 'action' },
          key: 'option'
        },
      ]
    }
  },
  computed:{
    // 菜单名字
    menuName(){
      return this.$route.meta.title || this.$route.name
    },
    // 文本框高度  自适应
    rows(){
      return Math.ceil((this.numbs || '').length/42) || 1
    }
  },
  mounted () {
    this.initData()
  },
  methods: {
    /**初始化数据 */
    initData(){
      getUserRecord({}).then(res => {
        this.tableData = res.list
      })
    },
    /* 粘贴事件 粘贴的时候格式化一下数据 */
    paste(){
      /* 将数据中的空格转化为逗号 */
      setTimeout(()=>{
        this.numbs = (this.numbs || '').trim().replace(/\s/g, ',')
      }, 300)
    },
    /* 拉取人员 */
    pullData(type){
      pullUser({value: this.numbs, type}).then(res => {
        if (res instanceof Array && res.length > 0) {
          this.$confirm({
            title: '提示',
            content: `${res}, 这些数据拉取为空,请进一步核实再重试这些数据`,
          });
        }
        this.initData()
      })
    },
    /**跳转详情页面 */
    detil(pullTime){
      this.$router.push({ path: '/synchronization/detail', query: { pullTime } })
    }
  },
}
</script>

<style lang="less" scoped>
</style>